<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://unpkg.com/lucky-canvas@1.7.25"></script>
		<style>
			body,
			html {
				margin: 0;
				padding: 0;
			}
			.container {
				height: 100vh;
				width: 100vw;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(255, 138, 138, 0.8);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div id="my_lucky"></div>
		</div>
		<script>
			let count = 0;
			function randomNumber(min, max) {
				return Math.floor(Math.random() * (max - min)) + min;
				//random(min,max) 向下取整的随机数
			}
			var randomColor = function () {
				var r = randomNumber(0, 255);
				var g = randomNumber(0, 255);
				var b = randomNumber(0, 255);
				// var a = randomNumber(1, 10) / 10;
				document.body.style.background = `rgb(${r},${g},${b})`;
			};
			const myLucky = new LuckyCanvas.LuckyWheel('#my_lucky', {
				width: '500px',
				height: '500px',
				blocks: [{ padding: '10px', background: '#617df2' }],
				prizes: [
					{ background: '#9b59b6', fonts: [{ text: '谢谢参与', top: '20%' }] },
					{ background: '#e67e22', fonts: [{ text: '一天', top: '20%' }] },
					{ background: '#3498db', fonts: [{ text: '谢谢参与', top: '20%' }] },
					{ background: '#c0392b', fonts: [{ text: '一周', top: '20%' }] },
					{ background: '#1abc9c', fonts: [{ text: '谢谢参与', top: '20%' }] },
					{ background: '#e74c3c', fonts: [{ text: '一月', top: '20%' }] },
					{ background: '#f1c40f', fonts: [{ text: '谢谢参与', top: '20%' }] },
					// { background: '#6c5ce7', fonts: [{ text: '谢谢参与7', top: '20%' }] },
				],
				buttons: [
					{
						radius: '35%',
						background: '#8a9bf3',
						pointer: true,
						fonts: [{ text: '开始', top: '-10px' }],
					},
				],
				start: function () {
					count += 1;
					let timer;
					// 开始游戏
					myLucky.play();
					let index = count % 9 === 0 && count !== 0 ? 5 : count % 6 === 0 && count !== 0 ? 3 : count % 3 === 0 && count !== 0 ? 1 : null;
					if (!index) {
						const temp = randomNumber(0, 3);
						index = temp * 2;
					} else {
						timer = setInterval(() => {
							randomColor();
						}, 1000 / index / 2);
					}
					// 使用定时器模拟接口
					setTimeout(() => {
						// 结束游戏
						clearInterval(timer);
						myLucky.stop(index);
					}, 3000);
				},
			});
		</script>
	</body>
</html>
